<template>
  <div v-if="visible" class="modal">
    <div>
      <el-form
        :label-position="'left'"
        label-width="80px"
        :model="localContent"
        style="width: 300px"
      >
        <el-form-item label="image">
          <el-input v-model="localContent.image"></el-input>
        </el-form-item>

        <div v-if="!isPut">
          <el-form-item label="username">
            <el-input
              v-model="localContent.username"
              placeholder="唯一"
            ></el-input>
          </el-form-item>
        </div>

        <div v-if="isPut">
          <el-form-item label="username">
            <div style="float: left">{{ postContent.username }}</div>
          </el-form-item>
        </div>

        <!-- <el-form-item label="username">
          <el-input
            v-model="localContent.username"
            placeholder="唯一"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="password">
          <el-input v-model="localContent.password"></el-input>
        </el-form-item>

        <div v-if="!isPut">
          <el-form-item label="name">
            <el-input v-model="localContent.name" placeholder="唯一"></el-input>
          </el-form-item>
        </div>

        <div v-if="isPut">
          <el-form-item label="name">
            <div style="float: left">{{ postContent.name }}</div>
          </el-form-item>
        </div>

        <el-form-item label="gender">
          <el-input v-model="localContent.gender" placeholder="0/1"></el-input>
        </el-form-item>
        <el-form-item label="job">
          <el-input v-model="localContent.job"></el-input>
        </el-form-item>
        <el-form-item label="entrydate">
          <el-input
            v-model="localContent.entrydate"
            placeholder="xxxx-xx-xx"
          ></el-input>
        </el-form-item>
        <el-form-item label="deptId">
          <el-input v-model="localContent.deptId"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" plain size="mini" @click="confirm"
      >确定</el-button
    >
    <el-button type="primary" plain size="mini" @click="closeModal"
      >关闭</el-button
    >
    <!-- <button @click="confirm">确定</button> -->
    <!-- <button @click="closeModal">关闭</button> -->
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      visible: Boolean,
    },
    postContent: {
      type: Object,
      required: true,
    },
    isPut: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      // 创建一个局部状态变量来存储数据
      localContent: this.postContent, //父组件传过来的
    };
  },
  methods: {
    closeModal() {
      this.$emit("update:visible", false);
      this.$emit("update:isPut", false);
      this.localContent = {};
    },
    confirm() {
      this.$emit("post-content", this.localContent);
      this.closeModal();
      this.localContent = {};
    },
  },
};
</script>

<style scoped>
.modal {
  /* 模态框样式 */
  border-radius: 20px;
  padding: 20px;
  z-index: 3;
  background-color: rgb(224, 231, 244);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其他样式 */
}
</style>